<template>
  <main-wrapper bg="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/changebox-bg.png">
    <view class="page-head">
      <uni-icons type="arrow-left" color="white" size="30" @click="goBack"></uni-icons>
      <section-title title="Z元素商城" />
    </view>

    <view class="classify-list">
      <view class="classify-item" v-for="(item, index) in kinds" :key="index">
        <van-image width="3rem" height="3rem" :src="item.image"></van-image>
        <text class="white-content">{{ item.name }}</text>
      </view>
    </view>

    <section-title title="正在发售" class="gap-top" />

    <view class="products-list">
      <product-item
          v-for="(e, index) in new Array(8)"
          :key="index"
          class="product-item"
          title="一番赏 龙珠 基纽雪未来的语言的华语"
          pic="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/product-example.png"
          price="68.00"
          badge=""
          v-on:click="gotoDetail"
      />
    </view>
  </main-wrapper>
</template>

<script>
import MainWrapper from '@/wxcomponents/main-wrapper'
import SectionTitle from '@/wxcomponents/section-title'
import productItem from '@/wxcomponents/product-item'

export default {
  name: "mall",
  data() {
    return {
      kinds: [
        {
          'name': 'ALL',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/1.png'
        },
        {
          'name': '机甲拼装',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/1.png'
        },
        {
          'name': '手办雕像',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/2.png'

        },
        {
          'name': '潮玩积木',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/3.png'
        },
        {
          'name': '3C数码',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/4.png'
        },
        {
          'name': '周边',
          'image': 'https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/classify/5.png'
        }
      ]
    }
  },
  components: {
    SectionTitle,
    productItem,
    MainWrapper
  },
  onShow: async function(options) {
  },
  methods: {
    goBack() {
      uni.switchTab({
        url: '/pages/z-meta/index'
      })
    },
    gotoDetail(item) {
      console.log('---------gotoDetail')
      uni.navigateTo({
        url: `/pages/subPackage/malldetail`
      })
    }
  }
}
</script>

<style>
  page {
    background-color: #0A050B;
  }
</style>

<style lang="scss" scoped>
.page-head {
  position: fixed;
  display: flex;
  top: 0;
  gap: 10px;
  width: 150px;
  line-height: 88px;
  z-index: 100;
}

.classify-list {
  margin-top: 50rpx;

  display: flex;
  overflow-x: auto;
  flex-direction: row;
  flex-wrap: nowrap;

  .classify-item {
    margin: 0 20rpx 0 20rpx;

    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

.gap-top {
  margin-top: 26px;
}

.products-list {
  gap: 10px;
  margin-top: 12px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
.product-item {
  display: flex;
  justify-content: space-around;
}

.weal-box {
  display: flex;
  flex-direction: column;
  justify-content: center;

  .btn-box {
    margin-top: 20rpx;

    .btn {
      color: #FFFFFF;
      font-size: 24rpx;
      width: 140rpx;
      height: 60rpx;
      background: linear-gradient(to right, rgba(216, 90, 231, 100), rgba(50, 118, 237, 100));
    }
  }
}

</style>
